<template>
  <div>
    <pdf
      :src="pdfSrc"
      :page="currentPage"
      @num-pages="pageCount = $event"
      @page-loaded="currentPage = $event"
    ></pdf>
    <div>
      <button @click="previousPage" :disabled="currentPage === 1">
        Previous
      </button>
      <span>{{ currentPage }} / {{ pageCount }}</span>
      <button @click="nextPage" :disabled="currentPage === pageCount">
        Next
      </button>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";

export default {
  components: {
    pdf,
  },
  data() {
    return {
      pdfSrc:
        "https:\/\/www.whalenav.cn\/uploads\/20250220\/60de3e5d1601372b61812eeafe64a35f.pdf", // PDF文件的URL
      currentPage: 1,
      pageCount: 0,
    };
  },
  methods: {
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
  },
};
</script>

<style scoped>
/* 你可以在这里添加一些样式 */
</style>
